<template>
  <div class="home">
    <div class="main-box">
      <van-uploader accept="*/*" :after-read="afterRead">
        <div class="upload-box" >
          <div class="icon">
            <svg t="1674975971278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3224" width="64" height="64"><path d="M821.76 479.488c0 0-6.272-206.4-174.4-247.424S398.208 368.192 396.544 373.248C394.88 378.304 386.624 376 386.624 376c-13.44-12.736-72.704-41.984-134.976-4.48-62.208 37.504-39.68 108.736-39.68 108.736S119.744 472.768 72.448 615.168c-47.232 142.528 118.464 182.912 118.464 182.912l278.144 0 0-151.616-55.68 0L408.512 646.464 404.736 646.464l0-0.256c-3.2 0-5.76-2.56-5.76-5.824 0-1.92 1.024-3.584 2.56-4.672l113.984-119.872c1.6-1.792 3.84-3.008 6.464-3.008 2.688 0 5.056 1.344 6.656 3.328l113.152 118.912c0.192 0.128 0.384 0.32 0.576 0.512l1.088 1.152-0.384 0c0.576 1.024 0.96 1.92 0.96 3.136 0 3.584-2.88 6.528-6.528 6.528-0.128 0-0.128-0.128-0.256-0.128l0 0.256L575.936 646.528l0 151.616 252.48 0c0 0 120.384-30.144 131.008-154.432C970.176 519.424 821.76 479.488 821.76 479.488z" fill="#8F9EB2" p-id="3225"></path></svg>
          </div>
          <div class="toast">点击选择文件</div>

        </div>
      </van-uploader>

      <div class="allFile" @click="allowFile">
        <svg t="1674991306624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2715" width="200" height="200"><path d="M512 958.016611c-245.919634 0-446.016611-200.064292-446.016611-446.016611 0-245.919634 200.095256-446.016611 446.016611-446.016611 245.952318 0 446.016611 200.064292 446.016611 446.016611S757.952318 958.016611 512 958.016611zM512 129.983389c-210.655557 0-382.016611 171.359333-382.016611 382.016611 0 210.624593 171.359333 382.016611 382.016611 382.016611 210.624593 0 382.016611-171.359333 382.016611-382.016611S722.624593 129.983389 512 129.983389z" fill="#575B66" p-id="2716"></path><path d="M463.99957 304.00043c0 26.509985 21.490445 48.00043 48.00043 48.00043s48.00043-21.490445 48.00043-48.00043-21.490445-48.00043-48.00043-48.00043S463.99957 277.490445 463.99957 304.00043z" fill="#575B66" p-id="2717"></path><path d="M512 768c-17.664722 0-32.00086-14.303454-32.00086-32.00086L479.99914 448c0-17.664722 14.336138-32.00086 32.00086-32.00086s32.00086 14.336138 32.00086 32.00086l0 287.99914C544.00086 753.696546 529.664722 768 512 768z" fill="#575B66" p-id="2718"></path></svg>
        <span>查看支持的文件</span>
      </div>
      <div class="notice">
        最大支持上传{{fileData.allFileSize}}MB
      </div>
      <div class="now-file" v-if="nowFilename">
        已选择文件：<span style="color: #2468F2DF">{{nowFilename}}</span>
      </div>
      <van-button  v-if="nowFilename" round type="info" @click="uploadFile">立即上传</van-button>
    </div>

    <div class="myFile">
      <div class="title">
        我的文件
      </div>
      <div class="fileList"  v-if="fileData.data.length >= 1">
        <div class="item" v-for="item in fileData.data" :key="item.id" @click="copyUrl(item.url)">
          <div class="fileName">
            {{item.filename}}
          </div>
          <div class="fileSize">
            <span class="title2">大小</span>{{change_size(item.size)}}
          </div>
          <div class="uploadDate">
            <span class="title2">时间</span>{{item.date}}
          </div>
          <div class="fileUrl" >
            <span class="title2">链接</span><span class="url">{{item.url}}</span>
          </div>
        </div>
      </div>
      <div class="noFile" v-if="fileData.data.length === 0">
        我的文件空空如也~
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import clipboard from 'clipboard';
import { Dialog } from 'vant';

export default {
  name: 'cloudFile',
  components: {},
  data(){
    return {
      file:{},
      nowFilename:'',
      chooseFile:false,
      url:'',
      userid:'',
      fileData:{
        data:[]
      }
    }
  },
  computed:{

  },
  methods:{
    change_size(filesize){
      var size = "";
      if(filesize < 0.1 * 1024){                         //小于0.1KB，则转化成B
        size = filesize.toFixed(2) + "B"
      }else if(filesize < 0.1 * 1024 * 1024){            //小于0.1MB，则转化成KB
        size = (filesize/1024).toFixed(2) + "KB"
      }else if(filesize < 0.1 * 1024 * 1024 * 1024){     //小于0.1GB，则转化成MB
        size = (filesize/(1024 * 1024)).toFixed(2) + "MB"
      }else{                                            //其余转化成GB
        size = (filesize/(1024 * 1024 * 1024)).toFixed(2) + "GB"
      }
      var sizeStr = size + "";                        //转成字符串
      var index = sizeStr.indexOf(".");                    //获取小数点处的索引
      var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
      if(dou == "00"){                                //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    },
    afterRead(file){
      console.log(file.file.name)
      this.file = file;
      this.nowFilename = file.file.name;
    },
    uploadFile(){
      this.$toast.loading({
        message: '上传中...',
        forbidClick: true,
      });
      let param = new FormData()
      param.append('file', this.file.file)
      axios.post('http://cloudfile.yun28.cn/manage_file/upload?user=' + this.userid,param,{
        'Content-type' : 'multipart/form-data'
      })
          .then(response => {
            if (response.data.code === 400){
              return this.$toast.fail(response.data.msg);
            }
            if (response.data.code === 200) {
              this.$toast.success('上传成功！');
              this.file = {}
              this.nowFilename = false;
              this.url = response.data.url;
              // 获取我的文件列表
              this.getMyFileList()
            }

          })
    },
    async getMyFileList(){
      let {data:res} = await axios.post('http://cloudfile.yun28.cn/get_info/my_file_list',
          {
            user:this.userid
          }
      )
      console.log(res)
      this.fileData = res;
    },
    copyUrl(url){
      let that = this;
      let clipb = new clipboard('.item', {
        text: function () {
          return url;
        },
      });
      //复制成功响应
      clipb.on('success', function () {
        that.$toast.success('链接已复制！');
      });
    },
    allowFile(){
      Dialog.alert({
        title: '支持上传以下类型的文件',
        message: this.fileData.allowMimetype.join('，'),
        confirmButtonColor:'rgba(36, 104, 242, 0.87)'
      }).then(() => {
        // on close
      });
    }
  },
  mounted() {
    let geturl = window.location.href;
    let getqyinfo = geturl.split('?')[1]
    let getqys = new URLSearchParams('?'+getqyinfo)
    this.userid = getqys.get('user');
    // 获取我的文件列表
    this.getMyFileList()
  }
}
</script>

<style lang="less" scoped>
.main-box{
  padding: 15px;
}
.van-uploader{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  //margin: 15px;
  padding: 15px;
  border: 2px dashed #eee;
}
.upload-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 25px;

  .icon svg{
    height: 80px;
    width: 80px;
  }
  .toast{
    color: rgba(102, 103, 104, 0.83);
  }

}

.now-file{
  margin: 15px 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.48);
}
.van-button{
  margin: 20px auto;
  width: 100%;
}
.notice{
  margin: 10px 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.51);
}
.allFile{
  margin: 15px 0 0 0;
  display: flex;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.51);
  svg{
    height: 20px;
    width: 20px;
    margin-right: 10px;
  }
}


.myFile{
  padding: 15px;
  border-top: 1px solid #eee;
  .noFile{
    text-align: center;
    width: 100%;
    margin: 15px 0;
    color: rgba(0, 0, 0, 0.39);
  }
  .title{
    margin-bottom: 15px;
  }
  .title2{
    color: rgba(0, 0, 0, 0.58);
    margin-right: 12px;
  }
  .fileList .item{
    background-color: rgba(238, 238, 238, 0.5);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    .fileName{
      font-size: 17px;
      margin-bottom: 5px;
    }
    .fileUrl{
      .url{
        color: rgba(36, 104, 242, 0.87);
        word-break:break-all;
        word-wrap:break-word;
      }
    }
  }
}
</style>
